<template>
  <div class="forgot-password-container">
    <div class="forgot-password-card">
      <!-- 标题 -->
      <h1 class="title">重置密码</h1>
      <p class="subtitle">请输入手机号码接收验证码，设置新的密码</p>

      <!-- 表单 -->
      <el-form ref="formRef" :model="form" :rules="rules" @submit.prevent="handleSubmit" class="password-form">
        <!-- 手机号 -->
        <el-form-item prop="phone">
          <div class="input-container">
            <el-input v-model="form.phone" class="form-input" placeholder="请输入手机号" type="tel">
              <template #prefix>
                <el-icon class="input-icon">
                  <Phone />
                </el-icon>
              </template>
            </el-input>
          </div>
        </el-form-item>

        <!-- 验证码 -->
        <el-form-item prop="code">
          <div class="code-group">
            <div class="input-container">
              <el-input v-model="form.code" class="form-input" maxlength="6" placeholder="请输入验证码">
                <template #prefix>
                  <el-icon class="input-icon">
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </div>
            <el-button :disabled="isCountingDown" class="code-button" type="primary" @click="sendVerificationCode">
              {{ countDownText }}
            </el-button>
          </div>
        </el-form-item>

        <!-- 新密码 -->
        <el-form-item prop="password">
          <div class="input-container">
            <el-input v-model="form.password" :type="showPassword ? 'text' : 'password'" class="form-input"
              placeholder="请输入新密码" show-password>
              <template #prefix>
                <el-icon class="input-icon">
                  <Key />
                </el-icon>
              </template>

            </el-input>
          </div>
        </el-form-item>

        <!-- 确认密码 -->
        <el-form-item prop="confirmPassword">
          <div class="input-container">
            <el-input v-model="form.confirmPassword" :type="showConfirmPassword ? 'text' : 'password'"
              class="form-input" placeholder="请确认新密码" show-password>
              <template #prefix>
                <el-icon class="input-icon">
                  <Key />
                </el-icon>
              </template>
            </el-input>
          </div>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-button :loading="loading" class="submit-button" type="primary" @click="handleSubmit">
          确认重置
        </el-button>
        <!-- 返回登录 -->
        <div class="back-login">
          <router-link to="/login" class="back-link">返回登录</router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script setup>
  // 基础库导入
  import { reactive, ref } from 'vue';
  import { message } from 'ant-design-vue';
  import { Phone, Lock, Key, View, Hide } from '@element-plus/icons-vue';
  // 表单数据模型（与模板中的el-form绑定）
  const form = reactive({
    phone: '',       // 手机号输入
    code: '',        // 验证码输入
    password: '',    // 新密码输入
    confirmPassword: '' // 确认密码输入
  });

  // 界面状态控制
  const showPassword = ref(false);           // 显示/隐藏密码
  const showConfirmPassword = ref(false);    // 显示/隐藏确认密码
  const loading = ref(false);                // 提交加载状态
  const formRef = ref();        // 表单引用（用于触发验证）

  // 验证码相关状态
  const countDown = ref(0);                  // 倒计时剩余秒数
  const isCountingDown = ref(false);         // 是否正在倒计时
  const countDownText = ref('获取验证码');    // 倒计时按钮文本

  const submitCoolDown = ref(0);            // 提交操作冷却时间
  // 表单验证规则（与el-form的rules绑定）
  const rules = reactive({
    phone: [
      { required: true, message: '请输入手机号码', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
    ],
    code: [
      { required: true, message: '请输入验证码', trigger: 'blur' },
      { len: 6, message: '验证码必须是6位数字', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入新密码', trigger: 'blur' },
      { min: 6, message: '密码长度至少 6 位', trigger: 'blur' },
      { max: 12, message: '密码长度至多12位', trigger: ['blur', 'change'] }
    ],
    confirmPassword: [
      { required: true, message: '请确认新密码', trigger: 'blur' },
      {
        validator: (_, value, callback) => {
          if (value !== form.password) callback(new Error('两次输入的密码不一致'))
          else callback()
        }, trigger: 'blur'
      }
    ]
  });

  // 启动60秒倒计时
  const startCountDown = () => {
    isCountingDown.value = true;
    countDown.value = 60;
    const timer = setInterval(() => {
      if (countDown.value > 0) {
        countDown.value--;
        countDownText.value = `${countDown.value}秒后重试`;
      } else {
        clearInterval(timer);
        isCountingDown.value = false;
        countDownText.value = '获取验证码';
      }
    }, 1000);
  };

  // 发送验证码方法
  const sendVerificationCode = async () => {
    try {
      // 验证手机号字段
      await formRef.value?.validateField('phone');
      //成功后发送验证码，这里可以调用后端接口


      message.success('验证码已发送',1);
      startCountDown();

    } catch (error) {
      message.error('请填写正确的手机号码',1);
    }
  };

  // 切换密码可见性 
  const togglePasswordVisibility = () => {
    showPassword.value = !showPassword.value;
  };

  // 切换确认密码可见性 
  const toggleConfirmPasswordVisibility = () => {
    showConfirmPassword.value = !showConfirmPassword.value;
  };

  // 表单提交处理（适配模板中的@submit事件）
  const handleSubmit = async () => {
    //提交冷却时间 
    const now = Date.now();
    if (now - submitCoolDown.value < 3000) {
      return;
    }
    try {
      // 触发整个表单验证
      await formRef.value?.validate();
      loading.value = true;
      // 发送重置密码请求，这里可以调用后端接口


      await new Promise(resolve => setTimeout(resolve, 1000));
      message.success('密码重置成功',1);
      // 此处可添加跳转到登录页的逻辑
      // formRef.value?.resetFields(); // 重置表单字段
    } catch (error) {
      message.destroy(); // 先关闭所有消息
      message.error('请正确填写表单',1);
      submitCoolDown.value = now; // 设置错误操作冷却
    } finally {
      loading.value = false;
    }
  };
</script>
<style lang="scss" scoped>
  .forgot-password-container {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: #f9fafb;
      background: url('@/assets/images/downloadImage.webp') center center / cover no-repeat;

    .forgot-password-card {
      width: 53%;
      padding: 20px 0;
      background-color: white;
      border-radius: 2rem;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 

      .title {
        margin-bottom: 0.75rem;
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
        color: #1f2937;
        letter-spacing: -0.025em;
      }

      .subtitle {
        margin-bottom: 2.5rem;
        font-size: 1rem;
        text-align: center;
        color: #6b7280;
      }

      .password-form {
        max-width: 480px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;

        .code-group {
          display: flex;
          align-items: center;
          background: #f8fafc;
          border-radius: 12px;
          border: 1.5px solid #e5e7eb;
          transition: all 0.2s ease;
          width: 100%;
          height: 52px;
          overflow: hidden;

          .input-container {
            flex: 1;

            :deep(.el-input__wrapper) {
              border: none !important;
              border-radius: 12px 0 0 12px !important;
            }
          }

          .code-button {
            height: 52px;
            padding: 0 1.25rem;
            border: none;
            background: transparent;
            color: #6b7280 !important;
            font-weight: 500;
            white-space: nowrap;
            transition: all 0.2s ease;
            flex-shrink: 0;

            &:hover:not(:disabled) {
              color: #4096ff !important;
              background: #f0f7ff !important;
            }

            &:disabled {
              color: #94a3b8 !important;
              background: transparent !important;
              cursor: not-allowed;
            }
          }

          &:focus-within {
            border-color: #4096ff;
            box-shadow: 0 0 0 3px rgba(64, 150, 255, 0.1);
          }
        }

        .input-container {
          width: 100%;

          :deep(.el-input__wrapper) {
            width: 100% !important;
            background-color: rgb(249 250 251) !important;
            border: 1.5px solid #e5e7eb !important;
            box-shadow: none !important;
            border-radius: 12px !important;
            padding: 0 16px !important;
            transition: all 0.2s ease !important;
            height: 52px !important;

            &.is-focus {
              background-color: white !important;
              border-color: #4096ff !important;
              box-shadow: 0 0 0 3px rgba(64, 150, 255, 0.1) !important;
            }
          }

          :deep(.el-input__inner) {
            height: 52px !important;
            font-size: 15px !important;
            color: #1f2937 !important;

            &::placeholder {
              color: #9CA3AF !important;
            }
          }

          :deep(.el-input__prefix) {
            margin-right: 12px !important;
            color: #9CA3AF !important;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important;

            .el-icon {
              font-size: 18px !important;
            }
          }
        }

        .submit-button {
          width: 100%;
          margin-top: 10px;
          border-radius: 16px;
          height: 52px !important;
          font-size: 16px !important;
          font-weight: 600 !important;
          letter-spacing: 0.5px !important;
          background: linear-gradient(135deg, #4096ff 0%, #1677ff 100%);
          border: none !important;
          box-shadow: 0 4px 6px rgba(64, 150, 255, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;

          &:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 8px rgba(64, 150, 255, 0.3) !important;
          }
        }
      }

      .back-login {
        text-align: center;
        margin-top: 1.5rem;

        .back-link {
          color: #4096ff;
          transition: all 0.3s ease;
          display: inline-block;
          position: relative;
          padding: 2px 4px;
          text-decoration: none;
          font-size: 14px;

          &:hover {
            color: #1b7aff;
            transform: translateY(-1px) scale(1.02);
            text-shadow: 0 2px 4px rgba(27, 122, 255, 0.1);
          }

          &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            bottom: 0;
            left: 0;
            background-color: #1b7aff;
            transform: scaleX(0);
            transform-origin: bottom right;
            transition: transform 0.3s ease;
          }

          &:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
          }
        }
      }
    }
  }

  :deep(.el-form-item) {
    margin-bottom: 1.25rem !important;
    position: relative !important;
  }

  :deep(.el-form-item__error) {
    font-size: 0.875rem !important;
    color: #dc2626 !important;
    margin-top: 0.25rem !important;
    padding-left: 0.5rem !important;
    position: absolute !important;
    animation: fadeIn 0.3s ease-in-out !important;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  :deep(.el-form-item.is-error) {

    .input-container,
    .code-group {
      .el-input__wrapper {
        border-color: #dc2626 !important;
        box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.1) !important;

        &:hover {
          border-color: #ef4444 !important;
        }

        &:focus-within {
          border-color: #dc2626 !important;
          box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
        }
      }
    }

    .code-group {
      border-color: #dc2626 !important;
      box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.1) !important;

      &:hover {
        border-color: #ef4444 !important;
      }

      &:focus-within {
        border-color: #dc2626 !important;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
      }
    }
  }
</style>